<template>
  <div>
    <div
      class="center"
      v-loading="loadFlag"
      element-loading-text="商品正在修改中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    >
      <el-card>
        <div class="tip">基本信息</div>
        <el-form
          :label-position="'right'"
          :model="goodsBaseInfo"
          :rules="goodsInfoRules"
          ref="goodsInfoForm"
          :inline="true"
        >
          <el-row>
            <el-form-item label="商品编号:" class="my_form_item_style">
              <el-input
                :disabled="true"
                v-model="goodsBaseInfo.goodsCode"
                style="width: 350px"
              ></el-input>
              <el-button
                style="background-color:#fd804c;color: #fff;"
                class="tag"
                @click="copy(goodsBaseInfo.goodsCode)"
                >复制ID</el-button
              >
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="商品名称:" prop="goodsTitle">
              <el-input
                v-model="goodsBaseInfo.goodsTitle"
                show-word-limit
                maxlength="15"
                style="width: 800px"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="商品描述:" class="my_form_item_style">
              <el-input
                v-model="goodsBaseInfo.description"
                show-word-limit
                maxlength="60"
                style="width: 800px"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="商品标签:" class="my_form_item_style">
              <el-input
                v-model="goodsBaseInfo.goodsTag"
                show-word-limit
                maxlength="8"
                style="width: 800px"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="技能分类:" class="my_form_item_style">
              <el-select
                v-model="goodsBaseInfo.skillType"
                disabled
                style="width: 800px"
                placeholder="选择技能类别"
              >
                <el-option label="A技能" value="A"></el-option>
                <el-option label="B技能" value="B"></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="选择单位:" class="my_form_item_style">
              <el-select
                v-model="goodsBaseInfo.unit"
                style="width: 800px"
                disabled
                placeholder="选择服务商品单位"
              >
                <el-option
                  v-for="(unit, index) in unitList"
                  :label="unit.unitName"
                  :value="unit.unitCode"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="工艺类型:" class="my_form_item_style">
              <el-select
                v-model="goodsBaseInfo.selectedCraftCode"
                disabled
                style="width: 400px"
              >
                <el-option
                  v-for="(craft, index) in craftTypeList"
                  :label="craft.craftName"
                  :value="craft.craftCode"
                  :key="index"
                >
                </el-option>
              </el-select>
              <el-input
                type="text"
                v-model="goodsBaseInfo.selectedCraftAlias"
                style="width: 400px"
                maxlength="15"
                show-word-limit
                placeholder="请输入工艺别名"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="商品类型:" class="my_form_item_style">
              <el-select v-model="goodsBaseInfo.goodsType" disabled>
                <el-option label="单项商品" :value="0" />
                <el-option label="保洁体验卡" :value="1" />
                <el-option label="家务师体验卡" :value="2" />
                <el-option label="保洁周期卡" :value="3" />
                <el-option label="家务师周期卡" :value="4" />
              </el-select>
              <div
                v-if="goodsBaseInfo.goodsType === 0"
                style="display: inline-block; margin-left: 15px"
              >
                <el-checkbox v-model="goodsBaseInfo.isSpecialGoods"
                  >专项商品</el-checkbox
                >
              </div>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item
              label="支付类型:"
              prop="payType"
              v-if="
                goodsBaseInfo.goodsType === 3 || goodsBaseInfo.goodsType === 4
              "
            >
              <el-radio v-model="goodsBaseInfo.payType" :label="0"
                >全额支付</el-radio
              >
              <el-radio v-model="goodsBaseInfo.payType" :label="1"
                >月付</el-radio
              >
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item
              label="确定月付次数:"
              prop="payMonthlyNum"
              v-if="goodsBaseInfo.payType == 1"
            >
              <el-input
                placeholder="请输入次数"
                v-model="goodsBaseInfo.payMonthlyNum"
              ></el-input>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item
              label="是否开启月付循环:"
              prop="payMonthlyCycle"
              v-if="goodsBaseInfo.payType == 1"
            >
              <el-radio v-model="goodsBaseInfo.payMonthlyCycle" :label="1"
                >是</el-radio
              >
              <el-radio v-model="goodsBaseInfo.payMonthlyCycle" :label="0"
                >否</el-radio
              >
            </el-form-item>
          </el-row>
          <el-row
            v-if="
              goodsBaseInfo.goodsType === 3 || goodsBaseInfo.goodsType === 4
            "
          >
            <el-form-item label="关联专项:" class="my_form_item_style">
              <el-select
                v-model="goodsBaseInfo.specialGoodsList"
                multiple
                placeholder="请选择"
              >
                <el-option
                  v-for="item in specialGoodsOptions"
                  :key="item.goodsCode"
                  :label="item.goodsTitle"
                  :value="item.goodsCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row v-if="goodsBaseInfo.goodsType !== 0">
            <el-form-item label="服务期限:" prop="serviceExpiryDate">
              <el-input
                style="width: 120px"
                v-model.number="goodsBaseInfo.serviceExpiryDate"
                autocomplete="off"
              ></el-input>
              &nbsp;&nbsp;天
              <!--              <el-radio-group style="margin-left: 50px" v-model="goodsBaseInfo.serviceExpiryType">
                <el-radio :label="0">购买当日算起</el-radio>
                <el-radio :label="1">购买次日算起</el-radio>
              </el-radio-group>-->
            </el-form-item>
          </el-row>
          <!-- {{scope.row.valueList[index].week}} -->
          <el-row
            class="checkuserAppointmentDateDataRow"
            v-if="
              goodsBaseInfo.goodsType === 3 || goodsBaseInfo.goodsType === 4
            "
          >
            <el-form-item label="用户可预约日期:">
              <el-checkbox v-model="fixedDateFlag">固定日期</el-checkbox>
            </el-form-item>
            <el-table
              :data="userAppointmentDateData"
              border
              class="checkWeekTable"
            >
              <el-table-column
                v-for="(item, index) in userAppointmentDateData[0].valueList"
                :key="index"
                :label="weekOptions[item.week]"
                width="60"
              >
                <template slot-scope="scope">
                  <el-checkbox
                    v-model="scope.row.valueList[index].checked"
                  ></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row>
            <el-form-item label="服务分类:" prop="classifyCode">
              <el-select
                v-model="goodsBaseInfo.classifyCode"
                @change="goodsBaseInfo.subClassifyCode = ''"
                placeholder="选择一级分组"
              >
                <el-option
                  v-for="(classify, index) in classifyTree"
                  :key="index"
                  :label="classify.classifyName"
                  :value="classify.classifyCode"
                ></el-option>
              </el-select>
              <el-select
                v-model="goodsBaseInfo.subClassifyCode"
                placeholder="选择服务分组"
              >
                <el-option
                  v-for="(classify, index) in subClassifyList"
                  :key="index"
                  :label="classify.classifyName"
                  :value="classify.classifyCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="是否可售:" class="my_form_item_style">
              <el-switch v-model="goodsBaseInfo.isCanSell"></el-switch>
            </el-form-item>
          </el-row>
          <el-row v-if="!goodsBaseInfo.isCanSell">
            <el-form-item label="不可售说明:" prop="notSellExplain">
              <el-input
                v-model="goodsBaseInfo.notSellExplain"
                maxlength="4"
                show-word-limit
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="商品上下架" prop="isPutAway">
              <el-switch v-model="goodsBaseInfo.isPutAway"></el-switch>
              <span style="font-size:12px;margin-left:8px;color:#F56C6C;"
                >提示：创建商品后，需在员工管理中的技能库里配置对应的技能，
                并且对应商圈的员工需要选择并配置该项技能，才可以编辑上架！</span
              >
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="区域分组:" prop="areaCodes">
              <el-checkbox-group v-model="goodsBaseInfo.areaCodes">
                <el-checkbox
                  v-for="(area, index) in subServiceAreaList"
                  :key="index"
                  :label="area.areaCode"
                  border
                >
                  {{ area.areaName }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="可售时段:" prop="sellTimeIntervals">
              <el-time-select
                v-model="sellTimeInterval"
                format="HH:mm"
                @change="chooseTimeInterval($event)"
                placeholder="选择可售时间点"
                :picker-options="{
                  start: '08:00',
                  step: '00:30',
                  end: '21:00'
                }"
              >
              </el-time-select>

              <div style="position: relative;right: 10px">
                <el-tag
                  v-for="(tag, i) in goodsBaseInfo.sellTimeIntervals"
                  :key="i"
                  closable
                  type="success"
                  @close="tagClose(tag)"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </el-form-item>
          </el-row>
        </el-form>
      </el-card>

      <el-card style="margin-top: 20px" class="goodsCraftForm">
        <div class="tip">商品价格</div>
        <el-tabs type="border-card">
          <el-tab-pane v-if="goodsCrafts.length > 0" label="基础价格">
            <el-form ref="goodsCraftForm" :inline="true">
              <el-table border :data="goodsCrafts" style="width: 100%">
                <el-table-column v-if="false" prop="skuId" label="skuId">
                </el-table-column>
                <el-table-column
                  prop="craftName"
                  label="工艺类型"
                  width="100px"
                >
                </el-table-column>
                <el-table-column v-if="false" prop="craftCode" label="工艺code">
                </el-table-column>
                <el-table-column :label="'总数量'">
                  <template slot-scope="scope">
                    <!--                    <template v-if="scope.row.edit">
                      <el-form-item :prop="`craftList.${scope.$index}.num`">
                        <el-input v-model="scope.row.num"></el-input>
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.num }}</span>-->
                    <span>{{ scope.row.num }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="单次时长(分钟)" width="120">
                  <template slot-scope="scope">
                    <!--                    <template v-if="scope.row.edit">
                      <el-form-item :prop="`craftList.${scope.$index}.duration`">
                        <el-input v-model="scope.row.duration"/>
                      </el-form-item>
                    </template>
                    <span v-else>{{scope.row.duration}}</span>-->
                    <span>{{ scope.row.duration }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="单次价格(元)" width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-form-item
                        :prop="`craftList.${scope.$index}.basicPrice`"
                      >
                        <el-input v-model="scope.row.basicPrice" />
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.basicPrice }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="实际售价(元)" width="120">
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-form-item
                        :prop="`craftList.${scope.$index}.actualSellPrice`"
                      >
                        <el-input v-model="scope.row.actualSellPrice" />
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.actualSellPrice }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="月付每月售价(元)" width="140px">
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-form-item
                        :prop="
                          `cityAreaPriceList.${scope.$index}.payMonthlyPrice`
                        "
                      >
                        <el-input v-model="scope.row.payMonthlyPrice" />
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.payMonthlyPrice }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="材质">
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-form-item :prop="`craftList.${scope.$index}.texture`">
                        <el-input v-model="scope.row.texture" />
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.texture }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="skuName" label="规格名称" width="140">
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-form-item :prop="`craftList.${scope.$index}.skuName`">
                        <el-input v-model="scope.row.skuName" />
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.skuName }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="工艺描述" width="180px">
                  <template slot-scope="scope">
                    <template v-if="scope.row.edit">
                      <el-form-item
                        :prop="`craftList.${scope.$index}.description`"
                      >
                        <el-input
                          v-model="scope.row.description"
                          maxlength="15"
                          show-word-limit
                        />
                      </el-form-item>
                    </template>
                    <span v-else>{{ scope.row.description }}</span>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                  <template slot-scope="{ row }">
                    <el-button
                      v-if="row.edit"
                      type="success"
                      size="small"
                      icon="el-icon-circle-check-outline"
                      @click="confirmCraftEdit(row)"
                    >
                      保存
                    </el-button>
                    <el-button
                      v-else
                      style="background-color:#fd804c;color: #fff;"
                      size="small"
                      icon="el-icon-edit"
                      @click="row.edit = !row.edit"
                    >
                      编辑
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
          </el-tab-pane>

          <el-tab-pane
            v-if="goodsCityPrices != null && goodsCityPrices.length > 0"
            label="城市价格"
          >
            <el-form ref="goodsCityPriceForm" :inline="true">
              <el-table border :data="goodsCityPrices" style="width: 100%">
                <el-table-column v-if="false" prop="skuId" label="skuId">
                </el-table-column>
                <el-table-column
                  prop="cityName"
                  label="城市"
                  fixed="left"
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="
                    craftTypeList.find(
                      c => c.craftCode === goodsBaseInfo.selectedCraftCode
                    ).craftName
                  "
                >
                  <el-table-column
                    prop="craftCode"
                    label="工艺编号"
                    v-if="false"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="cityCode"
                    label="归属城市编码"
                    v-if="false"
                  >
                  </el-table-column>
                  <el-table-column prop="num" label="数量(次)">
                  </el-table-column>
                  <el-table-column
                    prop="duration"
                    label="时长(分钟)"
                    width="120"
                  >
                  </el-table-column>
                  <el-table-column prop="texture" label="材质">
                  </el-table-column>
                  <el-table-column prop="skuName" label="规格名称" width="120">
                  </el-table-column>
                  <el-table-column label="单价(元)" width="120">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-form-item>
                          <el-input v-model="scope.row.cityPrice"></el-input>
                        </el-form-item>
                      </template>
                      <span v-else>{{ scope.row.cityPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="实际售价(元)" width="140">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-form-item>
                          <el-input
                            v-model="scope.row.actualSellPrice"
                          ></el-input>
                        </el-form-item>
                      </template>
                      <span v-else>{{ scope.row.actualSellPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="月付每月售价(元)" width="160">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-form-item>
                          <el-input v-model="scope.row.payMonthlyPrice" />
                        </el-form-item>
                      </template>
                      <span v-else>{{ scope.row.payMonthlyPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="上下架控制">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-switch
                          v-model="scope.row.isPutAway"
                          @change="isPutAwayCityPrice(scope.row)"
                          active-color="#fb8053"
                          inactive-color="#dcdfe6"
                        >
                        </el-switch>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="{ row }">
                      <el-button
                        v-if="row.edit"
                        type="success"
                        size="small"
                        icon="el-icon-circle-check-outline"
                        @click="confirmCityEdit(row)"
                      >
                        保存
                      </el-button>
                      <el-button
                        v-else
                        style="background-color:#fd804c;color: #fff;"
                        size="small"
                        icon="el-icon-edit"
                        @click="row.edit = !row.edit"
                      >
                        编辑
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-form>
          </el-tab-pane>

          <el-tab-pane
            v-if="
              goodsBusinessAreaPrices != null &&
                goodsBusinessAreaPrices.length > 0
            "
            label="商圈价格"
          >
            <el-form ref="goodsCityAreaPriceForm" :inline="true">
              <el-table
                border
                :data="goodsBusinessAreaPrices"
                :span-method="
                  param => objectSpanMethod(param, goodsBusinessAreaPrices, 1)
                "
                style="width: 100%"
              >
                <el-table-column v-if="false" prop="skuId" label="skuId">
                </el-table-column>
                <el-table-column
                  prop="cityName"
                  label="城市"
                  fixed="left"
                  width="150"
                >
                </el-table-column>
                <el-table-column
                  align="center"
                  :label="
                    craftTypeList.find(
                      c => c.craftCode === goodsBaseInfo.selectedCraftCode
                    ).craftName
                  "
                >
                  <el-table-column
                    prop="craftCode"
                    label="工艺编号"
                    v-if="false"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="cityCode"
                    label="归属城市编码"
                    v-if="false"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="areaCode"
                    label="商圈编码"
                    v-if="false"
                  >
                  </el-table-column>
                  <el-table-column prop="areaName" label="所属商圈">
                  </el-table-column>
                  <el-table-column prop="num" label="数量(次)">
                  </el-table-column>
                  <el-table-column
                    prop="duration"
                    label="时长(分钟)"
                    width="100"
                  >
                  </el-table-column>
                  <el-table-column prop="texture" label="材质">
                  </el-table-column>
                  <el-table-column prop="skuName" label="规格名称" width="120">
                  </el-table-column>
                  <el-table-column label="单价(元)" width="100">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-form-item>
                          <el-input v-model="scope.row.cityPrice"></el-input>
                        </el-form-item>
                      </template>
                      <span v-else>{{ scope.row.cityPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="实际售价(元)" width="120">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-form-item>
                          <el-input
                            v-model="scope.row.actualSellPrice"
                          ></el-input>
                        </el-form-item>
                      </template>
                      <span v-else>{{ scope.row.actualSellPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="月付每月售价(元)" width="140">
                    <template slot-scope="scope">
                      <template v-if="scope.row.edit">
                        <el-form-item>
                          <el-input v-model="scope.row.payMonthlyPrice" />
                        </el-form-item>
                      </template>
                      <span v-else>{{ scope.row.payMonthlyPrice }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="上下架控制" width="100px">
                    <template slot-scope="scope">
                      <el-form-item>
                        <el-switch
                          v-model="scope.row.isPutAway"
                          @change="isPutAwayAreaPrice(scope.row)"
                          active-color="#fb8053"
                          inactive-color="#dcdfe6"
                        >
                        </el-switch>
                      </el-form-item>
                    </template>
                  </el-table-column>

                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="{ row }">
                      <el-button
                        v-if="row.edit"
                        type="success"
                        size="small"
                        icon="el-icon-circle-check-outline"
                        @click="confirmAreaEdit(row)"
                      >
                        保存
                      </el-button>
                      <el-button
                        v-else
                        style="background-color:#fd804c;color: #fff;"
                        size="small"
                        icon="el-icon-edit"
                        @click="row.edit = !row.edit"
                      >
                        编辑
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table-column>
              </el-table>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>

      <el-card style="margin-top: 20px">
        <div class="tip">商品附件</div>

        <h3 style="margin-top: 15px">外部应用图</h3>

        <div style="margin-top: 15px">
          <el-upload
            action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
            list-type="picture-card"
            :headers="{ uploadScene: 'avatar' }"
            :file-list="iconImgList"
            :limit="1"
            :on-success="iconImgUpSuccess"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.attachUrl"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="iconImgHandlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!iconDisabled"
                  class="el-upload-list__item-delete"
                  @click="iconImgHandleRemove()"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="iconDialogVisible">
            <img width="100%" :src="iconDialogImageUrl" alt="" />
          </el-dialog>
        </div>

        <h3 style="margin-top: 15px">规格小图</h3>

        <div style="margin-top: 15px">
          <el-upload
            action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
            list-type="picture-card"
            :limit="1"
            :file-list="minImgList"
            :headers="{ uploadScene: 'avatar' }"
            :on-success="minImgUpSuccess"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.attachUrl"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="minHandlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!minDisabled"
                  class="el-upload-list__item-delete"
                  @click="minHandleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="minDialogVisible">
            <img width="100%" :src="minDialogImageUrl" alt="" />
          </el-dialog>
        </div>

        <h3 style="margin-top: 15px">头图</h3>

        <div style="margin-top: 15px">
          <el-upload
            action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
            list-type="picture-card"
            :headers="{ uploadScene: 'avatar' }"
            :file-list="headImgList"
            :on-success="headImgUpSuccess"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.attachUrl"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="headHandlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!headDisabled"
                  class="el-upload-list__item-delete"
                  @click="headHandleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="headDialogVisible">
            <img width="100%" :src="headDialogImageUrl" alt="" />
          </el-dialog>
        </div>

        <h3 style="margin-top: 15px">详情</h3>

        <div style="margin-top: 15px">
          <el-upload
            action="https://api.xstarlife.com/systemapp/upload/singleFileUpload"
            list-type="picture-card"
            :file-list="detailImgList"
            :headers="{ uploadScene: 'avatar' }"
            :on-success="detailImgUpSuccess"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.attachUrl"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="detailHandlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!detailDisabled"
                  class="el-upload-list__item-delete"
                  @click="detailHandleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="detailDialogVisible">
            <img width="100%" :src="detailDialogImageUrl" alt="" />
          </el-dialog>
        </div>
      </el-card>

      <div style="margin-top: 15px;text-align: center;">
        <el-button
          style="background-color:#fd804c;color: #fff;"
          @click="editGoods"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import moment from "moment";

export default {
  inject: ["reload"],
  data() {
    return {
      loadFlag: false,
      // 外部应用图列表
      iconImgList: [],
      // 商品头图列表
      headImgList: [],
      // 商品详情图列表
      detailImgList: [],
      // 小图列表
      minImgList: [],
      iconDialogImageUrl: "",
      iconDialogVisible: false,
      iconDisabled: false,
      headDialogImageUrl: "",
      headDialogVisible: false,
      headDisabled: false,
      detailDialogImageUrl: "",
      detailDialogVisible: false,
      detailDisabled: false,
      minDialogImageUrl: "",
      minDialogVisible: false,
      minDisabled: false,
      sellTimeInterval: "",
      // 商品基本信息
      goodsBaseInfo: "",
      // 商品工艺列表
      goodsCrafts: [],
      // 城市价格列表
      goodsCityPrices: [],
      // 商圈价格列表
      goodsBusinessAreaPrices: [],
      // 工艺列表
      craftTypeList: [],
      unitList: [],
      classifyTree: [],
      subClassifyList: [],
      subServiceAreaList: [],
      specialGoodsOptions: [],
      goodsInfoRules: {
        goodsTitle: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        skillType: [
          { required: true, message: "选择技能类别", trigger: "blur" }
        ],
        selectedCraftAlias: [
          { required: true, message: "请输入工艺别名", trigger: "blur" }
        ],
        notSellExplain: [
          { required: true, message: "请输入不可售原因", trigger: "blur" }
        ],
        goodsType: [
          { required: true, message: "请选择商品类型", trigger: "blur" }
        ],
        payType: [
          { required: true, message: "请选择支付类型", trigger: "blur" }
        ],
        payMonthlyNum: [
          { required: true, message: "请填写月付次数", trigger: "blur" }
        ],
        unit: [{ required: true, message: "请选择单位", trigger: "blur" }],
        classifyCode: [
          {
            required: true,
            validator: (rules, value, callback) => {
              let { subClassifyCode } = this.goodsBaseInfo;
              if (!value || !subClassifyCode) {
                return callback(new Error("请选择分组"));
              }
              return callback();
            },
            trigger: "blur"
          }
        ],
        serviceExpiryDate: [
          { required: true, message: "请输入服务有效期", trigger: "blur" }
        ],
        areaCodes: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个分组",
            trigger: "change"
          }
        ],
        sellTimeIntervals: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个可售时段",
            trigger: "change"
          }
        ]
      },
      fixedDateFlag: false,
      weekOptions: {
        "0": "周日",
        "1": "周一",
        "2": "周二",
        "3": "周三",
        "4": "周四",
        "5": "周五",
        "6": "周六"
      },
      userAppointmentDateData: [
        // 用户可预约日期
        {
          row: 1,
          valueList: [
            {
              week: "0",
              checked: false
            },
            {
              week: "1",
              checked: false
            },
            {
              week: "2",
              checked: false
            },
            {
              week: "3",
              checked: false
            },
            {
              week: "4",
              checked: false
            },
            {
              week: "5",
              checked: false
            },
            {
              week: "6",
              checked: false
            }
          ]
        }
      ]
    };
  },
  methods: {
    editGoods() {
      if (
        this.iconImgList.length === 0 ||
        this.headImgList.length === 0 ||
        this.detailImgList.length === 0 ||
        this.minImgList.length === 0
      ) {
        this.$message.error("小图、头图、详情图、外部应用图不能为空");
        return;
      }
      this.$refs["goodsInfoForm"].validate(valid => {
        if (valid) {
          this.loadFlag = true;
          let newsellDates = this.userAppointmentDateData[0].valueList.map(
            item => {
              if (item.checked) {
                if (item.week == "0") {
                  return 7;
                } else {
                  return Number(item.week);
                }
              } else {
                return "";
              }
            }
          );
          newsellDates = newsellDates.filter(item => item);
          let goods = {
            goodsBaseInfo: this.goodsBaseInfo,
            goodsAttachs: [
              ...this.iconImgList,
              ...this.headImgList,
              ...this.detailImgList,
              ...this.minImgList
            ],
            sellDates: this.fixedDateFlag ? newsellDates : []
          };
          this.$http
            .post("hssgoodsadmin/serviceGoodsInfo/updateGoodsInfo", goods)
            .then(() => {
              this.loadFlag = false;
              this.$router.go(0);
              this.$message.success("修改成功");
            });
          this.getGoodsInfoByGoodsCode(this.goodsBaseInfo.goodsCode);
        } else {
          this.$message({
            showClose: true,
            message: "请先填写必填字段",
            type: "error"
          });
          return;
        }
      });
    },
    confirmCraftEdit(row) {
      row.goodsCode = this.goodsBaseInfo.goodsCode;
      row.edit = !row.edit;

      this.$http
        .post("hssgoodsadmin/serviceGoodsInfo/updateGoodsCraft", row)
        .then(() => {
          this.$message.success("修改成功");
        });
    },
    confirmCityEdit(row) {
      row.goodsCode = this.goodsBaseInfo.goodsCode;
      row.edit = !row.edit;

      this.$http
        .post("hssgoodsadmin/serviceGoodsInfo/updateGoodsCityPrice", row)
        .then(() => {
          this.$message.success("修改成功");
        });
    },
    confirmAreaEdit(row) {
      row.goodsCode = this.goodsBaseInfo.goodsCode;
      row.edit = !row.edit;

      this.$http
        .post("hssgoodsadmin/serviceGoodsInfo/updateGoodsAreaPrice", row)
        .then(() => {
          this.$message.success("修改成功");
        });
    },
    isPutAwayCityPrice(row) {
      this.$http
        .post("hssgoodsadmin/serviceGoodsInfo/isPutAwayCityPrice", row)
        .then(() => {
          if (row.isPutAway) {
            this.$message.success("上架成功");
          } else {
            this.$message.success("下架成功");
            this.DetailByPage();
          }
        });
    },
    isPutAwayAreaPrice(row) {
      this.$http
        .post("hssgoodsadmin/serviceGoodsInfo/isPutAwayAreaPrice", row)
        .then(() => {
          if (row.isPutAway) {
            this.$message.success("上架成功");
          } else {
            this.$message.success("下架成功");
            this.DetailByPage();
          }
        });
    },
    iconImgUpSuccess({ data }) {
      this.iconImgList.push({
        attachPosition: 1,
        attachType: 1,
        attachUrl: data
      });
    },
    iconImgHandleRemove() {
      this.iconImgList = [];
    },
    iconImgHandlePictureCardPreview(file) {
      this.iconDialogImageUrl = file.attachUrl;
      this.iconDialogVisible = true;
    },
    headImgUpSuccess({ data }) {
      this.headImgList.push({
        attachPosition: 2,
        attachType: 1,
        attachUrl: data
      });
    },
    headHandlePictureCardPreview(file) {
      this.headDialogImageUrl = file.attachUrl;
      this.headDialogVisible = true;
    },
    headHandleRemove(file) {
      for (let i = 0; i < this.headImgList.length; i++) {
        if (this.headImgList[i] === file) {
          this.headImgList.splice(i, 1);
        }
      }
    },
    detailImgUpSuccess({ data }) {
      this.detailImgList.push({
        attachPosition: 3,
        attachType: 1,
        attachUrl: data
      });
    },
    detailHandlePictureCardPreview(file) {
      this.detailDialogImageUrl = file.attachUrl;
      this.detailDialogVisible = true;
    },
    detailHandleRemove(file) {
      for (let i = 0; i < this.detailImgList.length; i++) {
        if (this.detailImgList[i] === file) {
          this.detailImgList.splice(i, 1);
        }
      }
    },
    minImgUpSuccess({ data }) {
      this.minImgList.push({
        attachPosition: 4,
        attachType: 1,
        attachUrl: data
      });
    },
    minHandlePictureCardPreview(file) {
      this.minDialogImageUrl = file.attachUrl;
      this.minDialogVisible = true;
    },
    minHandleRemove(file) {
      for (let i = 0; i < this.minImgList.length; i++) {
        if (this.minImgList[i] === file) {
          this.minImgList.splice(i, 1);
        }
      }
    },
    copy(data) {
      let clipboard = new Clipboard(".tag", {
        text: function() {
          return data;
        }
      });
      clipboard.on("success", e => {
        this.$message({
          message: "复制成功",
          showClose: true,
          type: "success"
        });
        // 释放内存
        clipboard.destroy();
      });
    },
    tagClose(tag) {
      let tagList = this.goodsBaseInfo.sellTimeIntervals;
      tagList.splice(tagList.indexOf(tag), 1);
    },
    chooseTimeInterval(t) {
      if (t !== null) {
        if (this.goodsBaseInfo.sellTimeIntervals === null) {
          this.goodsBaseInfo.sellTimeIntervals = [];
        }
        if (this.goodsBaseInfo.sellTimeIntervals.indexOf(t) === -1) {
          this.goodsBaseInfo.sellTimeIntervals.push(t);
        }
      }
      this.sellTimeInterval = "";
    },
    objectSpanMethod(
      { row, column, rowIndex, columnIndex },
      tableData,
      cellIndex
    ) {
      if (columnIndex === 0 || cellIndex === columnIndex) {
        const cellValue = row[column.property];
        if (cellValue) {
          // 上一条数据
          const prevRow = tableData[rowIndex - 1];
          // 下一条数据
          let nextRow = tableData[rowIndex + 1];
          // 当上一条数据等于下一条数据
          if (prevRow && prevRow[column.property] === cellValue) {
            return { rowspan: 0, colspan: 0 };
          } else {
            let rowspan = 1;
            while (nextRow && nextRow[column.property] === cellValue) {
              rowspan++;
              nextRow = tableData[rowspan + rowIndex];
            }
            if (rowspan > 1) {
              return { rowspan, colspan: 1 };
            }
          }
        }
      }
    },
    async getGoodsInfoByGoodsCode(goodsCode) {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getGoodsInfoByGoodsCode?goodsCode=${goodsCode}`
      );
      let {
        goodsBaseInfo,
        goodsCrafts,
        goodsCityPrices,
        goodsBusinessAreaPrices,
        goodsAttachs,
        sellDates
      } = data;
      this.goodsBaseInfo = goodsBaseInfo;
      this.goodsCrafts = goodsCrafts;
      this.goodsCityPrices = goodsCityPrices;
      this.goodsBusinessAreaPrices = goodsBusinessAreaPrices;

      this.iconImgList = goodsAttachs.filter(a => a.attachPosition === 1);
      this.headImgList = goodsAttachs.filter(a => a.attachPosition === 2);
      this.detailImgList = goodsAttachs.filter(a => a.attachPosition === 3);
      this.minImgList = goodsAttachs.filter(a => a.attachPosition === 4);

      if (sellDates.length > 0) {
        this.fixedDateFlag = true;
        const newSellDates = [];
        sellDates.forEach(item => {
          if (item == 7) {
            newSellDates.push("0");
          } else {
            newSellDates.push(item);
          }
        });
        newSellDates.forEach(item => {
          this.userAppointmentDateData[0].valueList[item].checked = true;
        });
      }
    },
    async getCraftTypeList() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getCraftList`
      );
      this.craftTypeList = data;
    },
    async getServiceClassify() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceClassify/getServiceClassifyList`
      );
      this.classifyTree = data;
      let classifyCode = this.goodsBaseInfo.classifyCode;
      this.subClassifyList = data.find(
        c => c.classifyCode === classifyCode
      ).children;
    },
    async getUnitList() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getUnitList`
      );
      this.unitList = data;
    },
    async getSubServiceAreaList() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceAreaInfo/getSubServiceAreaList`
      );
      this.subServiceAreaList = data;
    },
    async getSpecialGoodsList() {
      const { data } = await this.$http.get(
        `hssgoodsadmin/serviceGoodsInfo/getSpecialGoodsList`
      );
      this.specialGoodsOptions = data;
    }
  },
  created() {
    this.getGoodsInfoByGoodsCode(this.$route.params.goodsCode);
    this.getCraftTypeList();
    this.getServiceClassify();
    this.getUnitList();
    this.getSubServiceAreaList();
    this.getSpecialGoodsList();
  },
  watch: {
    "goodsBaseInfo.classifyCode": {
      handler() {
        let classifyCode = this.goodsBaseInfo.classifyCode;
        if (classifyCode !== "") {
          this.subClassifyList = this.classifyTree.find(
            c => c.classifyCode === classifyCode
          ).children;
        }
      }
    }
  }
};
</script>

<style scoped>
.tip {
  padding: 8px 16px;
  background-color: #ecf8ff;
  border-radius: 4px;
  border-left: 5px solid #50bfff;
  margin: 20px 0;
}
.goodsCraftForm .el-form-item {
  margin-bottom: 0;
}
.el-tag--light {
  margin-left: 10px;
}
.checkWeekTable {
  border-top: none;
}
.checkWeekTable /deep/ .cell {
  font-size: 14px;
  font-weight: 500;
}
.checkWeekTable /deep/ .el-table__header {
  border-top: 1px solid #ebeef5;
}
.checkWeekTable::before {
  content: none;
}
.checkWeekTable::after {
  content: none;
}
.checkuserAppointmentDateDataRow {
  margin-bottom: 20px;
}
.checkuserAppointmentDateDataRow .el-form-item {
  margin-bottom: 10px;
}
.checkWeekTable.el-table /deep/ tbody tr:hover > td {
  background-color: #ffffff !important;
}
.checkWeekTable.el-table /deep/ tbody tr:hover {
  background-color: #ffffff !important;
}
</style>
